<template>
    <div>
        <div class="detail" v-for="item of movies" :key="item._id">
                <div class="fix" :style="{'opacity':opacity}">{{item.title}}</div>
                <img class="picc" :src="item.pic">

            <p class="title">{{item.title}}</p>
            <p class="slogo">{{item.slogo}}</p>
            <p class="evaluate">{{item.evaluate}}</p>
            <div class="pf">
                <span class="rating">{{item.rating}}</span>
            
                <div class="star" v-for="(value,index) of handleStar(item.rating)" :key="index">
                    <img v-if="value>1.5" src="../../assets/star.png">
                    <img v-else-if="value>1" src="../../assets/ban-star.png">
                    <img v-else src="../../assets/none-star.png">
                </div>
            </div>
            <div>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            <p>肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎肖申克的救赎</p>
            

            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        data(){
            return{
                movies:[],
                opacity:0,
            }
        },
        destroyed() {
            console.log("destroyed")
            window.removeEventListener("scroll",this.handleScroll)
        },
        mounted(){
            window.addEventListener("scroll",this.handleScroll)
            console.log(this)
            var {id} = this.$route.params
            console.log(id);
            let url = `http://47.108.197.28:4000/api/movieDetail?id=${id}`;
            axios.get(url).then(res=>{
            this.movies = res.data.res;
            })
        },
        methods: {
            handleScroll(){
                var scrollTop = document.documentElement.scrollTop;
                var opacity = scrollTop/250;
                if(opacity>1){
                    opacity = 1
                }
                // console.log(opacity)
                this.opacity = opacity
                //当窗口滚动至300px时，opacity=1
            },
            handleStar(ele){
                var arr=[];
                for(let i=0;i<5;i++){
                    if(ele>=2){
                    arr.push(2)
                    }else if(ele>=0){
                    arr.push(Number(ele.toFixed(1)))
                    }else{
                    arr.push(0)
                    }
                    ele = ele - 2;
                }
                return arr
            },
        },
    }
</script>

<style scoped>
.fix{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #eee;
    position: fixed;
    text-align: center;
    top: 0;
}
.picc{
    width: 100%;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
}
.star img{
    widows: 50px;
    height: 50px;
}
.pf{
font-size: 16px;
display: flex;
}
</style>